<template>
  <div class="header">
      <div class="header-logo"><router-link :to="{path: '/'}">公证链数据共享服务平台</router-link></div>
      <div class="header-list">
        <ul>
          <li :class="{active: curRoute === 'index'}"><router-link :to="{path: '/'}">首页</router-link></li>
          <li :class="{active: curRoute === 'crossRegionCheck'}"><router-link :to="{path: '/crossRegionCheck'}">在线核验办证</router-link></li>
          <li :class="{active: curRoute === 'notarizaCheckPage'}"><router-link :to="{path: '/notarizaCheck'}">电子公证书</router-link></li>
          <li :class="{active: curRoute === 'checkIn'}"><router-link :to="{path: '/checkIn'}">入驻平台</router-link></li>
        </ul>
        <div class="header-btns">
          <router-link :to="{name: 'login'}">登录</router-link>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

/**
 * 首页头部组件封装
 * @Author yuanyexu
 * @Date 2021-08-03
 */
export default defineComponent({
  name: 'Header',
  props: {
    curRoute: {
      type: String,
    }
  },
  setup(props) {
    console.log(props.curRoute);

  }
});
</script>
<style lang="scss" scoped>
.header {
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    &-logo {
      a {
        display: block;
        height: 60px;
        line-height: 60px;
        font-weight: bold;
        font-size: 24px;
        color: #000;
      }
    }
    &-list {
      display: flex;
      line-height: 60px;
      ul {
        display: block;
        li {
          float: left;
          margin-right: 65px;
          a {
            color: #666666;
            font-size: 15px;
          }
        }
        li.active {
          a {
            color: #f52a24;
            border-bottom: #f52a24 solid 2px;
            padding-bottom: 14px;
          }
        }
      }
    }
    &-btns {
      a {
        font-size: 15px;
        line-height: 30px;
        color: #333333;
        border: #333333 solid 1px;
        padding: 5px 15px;
        border-radius: 30px;
      }
    }
  }
</style>
